When creating a Web site, the next most important area to pay attention to after the content is the navigation through the site. Unlike a printed document, where pages are presented in a linear sequence and a reader can select for themselves from the available pages which they wish to read, the visitor to a Web site is able to go only where you allow them to, using links you have defined to other pages in the site. If you create pages that do not have links into them, then they will be completely inaccessible to the visitor, and may never be seen.

It is essential that you consider navigation as an important part of the planning of your site.

To allow the visitor to navigate the site, you must define Hypertext links (normally abbreviated to Hyperlink). A Hyperlink can be applied to a selected run of text, or to any box you have drawn in Freeway, with the exception of HTML text boxes.

When creating navigation, you can link between pages in the same document, or you can also refer to external pages and even other objects, anywhere on the Web, using Hyperlinks defined within Freeway.

There are many types of Hyperlinks, and this chapter will introduce you to these. The most important ones to begin with, however, are the links that you create between pages in your document.

Linking between pages in your document

Defining the site navigation often starts when creating the basic layout of your Web pages, and ensuring that navigation is consistent and easy is one of the main tasks carried out when defining Master Pages.

Actually creating the links to other pages can be done at any stage during the design process - if the destination page already exists in the document when you wish to link to it, you can simply choose it by name from the list of existing pages. If the destination page does not yet exist, you can create it as you define the Hyperlink - this is called linking to a new page.

When defining a link to a page in the same Freeway document (referred to as an "Internal" link), it does not matter what the title of the destination page is, or what the filename of the destination page will be. In Freeway, pages in the same document are internally referenced as objects, and internal links are defined as being links to a page object whose title and filename may change before the site is exported. This provides you with a considerable amount of freedom and flexibility in the way you create your site, as you can continue to change the page titles and/or filenames right up until the site is published, without fear of breaking the links you have carefully defined.

When the pages are exported as HTML, the internal links are converted to explicit references to the actual page filenames as shown in the Inspector Palette.

Linking to external pages

Sometimes you need to define a link to a page that is not part of the same Freeway document. When you do this, you must type or copy/paste a reference to that page into the Hyperlinks dialog yourself. To do this, you can either refer to the external page with an absolute reference, using its complete URL (Uniform Resource Locator), or a relative reference, if the destination page is on the same Web site as the source page.

When entering external references, you must take care that the spelling and case used for external filenames is exactly correct.

Absolute references.

If you use an absolute reference, this specifies which Web server the destination page resides on, the exact path to it, and its filename. If you are linking to a page which is held on a different Web server to the one your source page is on, you MUST use the absolute reference, specifying the complete URL. Here is an example of such a URL:-

http://www.tiddles.com/my_folder/page1.html

This URL describes a page called page1.html, held in a folder called my_folder, on the Web server called www.tiddles.com. No matter where the source page is located on the Web, this link will always succeed if the destination page remains in that location.

Relative references

If you use a relative reference, then there is no mention of the specific server the destination page is on, and the link will assume that the source page and the destination page are on the same server. This method is of great advantage if you wish to have the flexibility to move the pages to a different location, without having to change the links.

For example, if a customer has commissioned you for some pages, and you wish to test them on your own server before giving them to the customer to put on their own Web site, it may well be best to use relative references. Remember that this only applies if the source and destination page are not part of the same Freeway document.

Here are three examples of relative references:-

page2.html

marketing/index.html

/marketing/index.html

The first example would be used to link to a page with a filename of page2.html which resides in the same folder as the source page. If you move either the source page or the destination page to a different folder, the link will break.

The second example would be used to link to a page with a filename of index.html which resides in a folder called marketing, which resides in the same folder as the source page. If you move the source page to a different location from the folder marketing, then the link will break, but you can move both somewhere else together.

The third example would be used to refer to a page with a filename of index.html which resides in a folder called marketing which is contained in the top level (or "root directory") of the same Web server. You can move the source page anywhere on the Web server, and the link will still work, but not if you move the source page to a different Web server, or if you move the folder marketing so that it is no longer at the top level of the Web server it resides on.

Creating Hyperlinks within Freeway

Within Freeway, Hyperlinks may be applied to any run of text (which can be either HTML text or GIF text) or to any box drawn with Freeway's drawing tools EXCEPT for HTML text boxes and form controls.

This section shows you how to;

· define an internal link to an existing page using the Hyperlinks dialog

· define an internal link to an existing page using the internal links popup menu

· define an external link using the Hyperlinks dialog

· create a new page as you link to it

· Drag and Drop Hyperlinks into Freeway

· remove Hyperlinks

To define an internal link to an existing page using the Hyperlinks dialog

1. Highlight the text, or select the box that you wish to apply the Hyperlink to.

2. Either -
Choose Hyperlinks from the Edit menu
Or -
Click the link area in the status line at the bottom of the document window to display the Hyperlinks dialog.

3. Select a page from the list of Existing Pages and click OK.

4. The link will be indicated by blue and underlined formatting for text,

or by displaying a link icon in the top left corner of boxes, as appropriate, and the link will be displayed in the status line at the foot of the document window when the text is highlighted or the box is selected.

To define an internal link to an existing page using the internal links popup menu

1. Highlight the text, or select the box that you wish to apply the Hyperlink to.

2. Select a page from the list of existing pages from the internal links popup menu at the bottom of the document window.

3. The link will be indicated by blue and underlined formatting for text, or by displaying a link icon in the top left corner of boxes, as appropriate, and the link will be displayed in the status line at the foot of the document window when the text is highlighted or the box is selected.

To define an external link using the Hyperlinks dialog

1. Highlight the text, or select the box that you wish to apply the Hyperlink to

2. Either -
Choose Hyperlinks from the Edit menu.
Or -
Click the link area in the status line at the bottom of the document window to display the Hyperlinks dialog.

3. Choose the appropriate link type from the URL popup menu, and type or copy/paste the link reference into the text field provided.
If creating a relative reference, do not specify a link type. Ensure that the reference completely replaces the default text "http://" in the text field.

4. The link will be indicated by blue and underlined formatting for text, or by displaying a link icon in the top left corner of boxes, as appropriate, and the link will be displayed in the status line at the foot of the document window when the text is highlighted or the box is selected.

To create a new page as you link to it

1. Highlight the text, or select the box that you wish to apply the Hyperlink to.

2. Either -
Choose Hyperlinks from the Edit menu.
Or -
Click the link area in the status line at the bottom of the document window to display the Hyperlinks dialog.

3. Select the New Page radio button, and if you wish choose a different master page to base the new page on.

4. Click OK. You will be prompted to name the new page.

5. The link will be indicated by blue and underlined formatting for text, or by displaying a link icon in the top left corner of boxes, as appropriate, and the link will be displayed in the status line at the foot of the document window when the text is highlighted or the box is selected.

Drag and drop hyperlinks

You can drag and drop Hyperlinks from HTML text displayed in some browsers. You can only drop the link onto boxes in Freeway, it cannot be dropped onto a text selection.

To copy the Hyperlink to a box in your Freeway document, open a Web page in your browser and find the text Hyperlink you want to copy. (Text with a hyperlink is usually shown in blue and underlined.) Before you drag the link, you will need to create a frame in Freeway and arrange the windows of the browser and your Freeway document so that you can see both the link in the browser and the box in Freeway.

Point to the linked text in the browser and drag it onto the frame in your Freeway document. The URL representing this hypertext link is copied to your Freeway document, applied to the frame and displayed in the Link status bar when you switch back into Freeway.

Removing Hyperlinks

You can remove a Hyperlink by highlighting the text, or selecting the box in question, going into the Hyperlinks dialog as above and choosing the option None.

Image Maps

Rather than creating a link on an entire graphic, which takes the visitor to the same destination no matter where on the graphic they click, it is possible to create links such that the visitor is taken to a different destination depending on which part of the graphic they click on. This is called an Image Map.

Creating an Image Map within Freeway

Image maps are easy to define within Freeway by creating hot-spots over the areas of the graphic you wish to link to somewhere else.

To create a hot-spot,

1. Import a graphic, and position and size it as you wish.

2. Draw an empty GIF box over each part of the graphic you wish to be a hot-spot.

3. Assign each box a unique hyperlink as described above.

You can create hotspots using either the GIF rectangle box drawing tool, the oval box drawing tool, or the pen tool. Using the pen tool, you can define either polygonal shapes or curved shapes. If you use a box which includes curves drawn with the pen tool, these will be converted in the HTML output to polygons which represent the curve as closely as possible.

Freeway creates client-side image maps. These are fully supported by most modern browsers, but may not be supported by all older versions.

Freeway does not provide a means for defining server-side image maps.

Setting Hyperlink colors for text

When Hyperlinks are displayed on HTML text in a Web browser, they are normally shown in color and underlined to set them apart from normal text which is not linked. If you do not specify otherwise, then the browser's own defaults for link colors will be used.

There are three colors which may be displayed for any piece of linked HTML text. These are; the color of links that have yet to be visited using that Web browser, the color that is displayed while a link is being clicked on, and the color used to indicate links that have already been visited by that Web browser. This is made possible because Web browsers remember which pages have been viewed in the past, and this helps a user visiting a Web site tell which parts they have yet to see.

It is important that the colors displayed show up well against the page background, or the visitor may find it hard to read the text, or to make out where the links on a page are. This is ensured by using colors that contrast well against the page background.

The default colors used by Web browsers typically contrast well against a white or grey page background, but do not show up well against, for example, a dark or black background. You must use your judgement, and when you feel that it is necessary, specify your own colors to be used for linked text.

Setting Hyperlink colors for text

You can set the colors for each of the three hyperlink states using the Page panel in the Inspector palette. To ensure that the same colors are used commonly across a range of pages, you can set this on the master page in use by those pages.

On the page or master page in question;

1. Display the page panel in the Inspector palette.

2. Choose a color from the Normal popup menu to set the color for links that have yet to be visited.

3. Choose a color from the Active popup menu to set the color for links as they are being clicked on.

4. Choose a color from the Visited popup menu to set the color for links that have been visited.

Any HTML text within the Freeway document which has a link applied will now display underlined in the color set for Normal. GIF text will not show this feedback, either in Freeway or in the browser.

Testing navigation within Freeway

As you define the navigation between pages in your site, it is essential that you test it as you go along, to ensure that the links go to the correct places and that the experience of navigating your site will be smooth for the visitor. You can do this while previewing the pages in your Web browser, but you can also test internal links from within Freeway.

To follow internal links within Freeway

1. Highlight the text, or select the box which has the internal link you wish to test

2. Choose Follow Link from the Edit menu.

3. Freeway will switch to the destination page.

To test external links, you must preview the site in a Web browser.

Types of Hyperlink

As mentioned before, there are a wide variety of types of Hyperlink, and you can specify any of these within Freeway's Hyperlink dialog when defining an external link.

Here is a brief description of the different types of Hyperlink.

file A reference to a file on the local hard disk on the computer which is running the Web browser. Use this to specify a local file when pages are to be viewed locally, not served by a Web server.

ftp A reference to a file held on an FTP server.

http A reference to an HTML page or other object which is held on a Web server.

https A reference to an HTML page or other object which is held on a secure Web server. When a Web browser loads a page from a secure server, the information sent between the browser and the server is encrypted so that 3rd parties cannot intercept or read it.

mailto A reference to an email address. When the browser is configured correctly, clicking on a mailto link will automatically launch the selected email client application on the visitor's computer and create a new blank email, addressed to the email address specified in the link.

news A reference to a newsgroup stored on an Internet News server. When such a link is activated, the browser will attempt to launch a news reader and link to the default news server, if one is specified.

Freeway also offers gopher, telnet and wais hyperlink protocols.

When defining absolute references to external objects served by your Web server, you can specify either http or omit the protocol altogether, but you MUST omit the protocol for relative references.

If you have entered text into the text field, then subsequently specify or change the protocol, Freeway intelligently preserves your text and prefixes it correctly with the new protocol.



		Back to the top Introduction \| Getting Started \| User Guide \| Contacting SoftPress